
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <style type="text/css">


			*{
				margin: 0;
				padding:0;
			}

			.box{
				 width: 980px;
				 height: 700px;
				 background-color: #D2E9F4;

				 margin: 0 auto;
			}

			.header{
				 height:50px;
				 background-color: black;
			}

			.content{
				 height: 600px;
				 background-color: #46F3B6;
			}

			.l-cont{
				 width: 100px;
				 height: 600px;
				 background-color: #780ED7;
				 float: left;
			}

			.m-cont{
				 width: 780px;
				 height: 600px;
				 background-color:#CBE923;
				 float: left;
			}

			.r-cont{
				 width: 100px;
				 height: 600px;
				 background-color: blue;
				 float: left;
			}

			.top{
				 height:300px;
				 background-color: #F25D0F;
			}

			.bot{
				 height: 300px;
				 background-color: #126812;
			}
        </style>
	
    </head>
    <body>


    	  <div class="box">
    	       <div class="header"></div>

    	       <div class="content">
				    <div class="l-cont"></div>	
				    <div class="m-cont">
                        <!-- 这下面都是流布局，不是那个浮动，所以有时候在
                        css上面不需要设置，左或者右。
                        只需要颜色与设置高度 -->
				    	 <div class="top"></div>
				    	 <div class="bot"></div>
				    </div>	
				    <div class="r-cont"></div>

			   </div>

			<div class="footer"></div>

    	  </div>
    </body>
</html>